<template>
  <el-dialog
    title="添加材料"
    :visible.sync="dialogVisible"
    width="70%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="add-material-dialog">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="材料名称:">
            <el-input
              v-model="searchForm.materialName"
              placeholder="请输入"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌:">
            <el-input
              v-model="searchForm.materialBrand"
              placeholder="请输入"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 材料列表 -->
      <div class="material-list">
        <el-table
          :data="materialList"
          border
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="materialName" label="材料名称" width="150"></el-table-column>
          <el-table-column prop="materialBrand" label="品牌" width="120"></el-table-column>
          <el-table-column prop="materialSpecifications" label="规格型号" width="150"></el-table-column>
          <el-table-column prop="materialUnit" label="单位" width="80"></el-table-column>
          <el-table-column prop="materialPrice" label="价格" width="100">
            <template slot-scope="scope">
              {{ scope.row.materialPrice || '0.00' }}
            </template>
          </el-table-column>
          <el-table-column prop="materialDesc" label="备注" min-width="200"></el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-section" v-if="pagination.total > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="selectedMaterials.length === 0">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { materialApi } from '@/api/material'

export default {
  name: 'AddMaterialDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      materialList: [],
      selectedMaterials: [],
      searchForm: {
        materialName: '',
        materialBrand: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.loadMaterials()
        }
      },
      immediate: true
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    // 加载材料列表
    async loadMaterials() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          materialName: this.searchForm.materialName || undefined,
          materialBrand: this.searchForm.materialBrand || undefined
        }
        
        const response = await materialApi.getMaterialPage(params)
        if (response.code === 200) {
          this.materialList = response.data.records || []
          this.pagination.total = response.data.total || 0
          this.pagination.current = response.data.current || 1
        } else {
          this.$message.error(response.message || '查询失败')
        }
      } catch (error) {
        console.error('查询材料列表失败:', error)
        this.$message.error('查询失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadMaterials()
    },

    // 选择改变
    handleSelectionChange(selection) {
      this.selectedMaterials = selection
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadMaterials()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadMaterials()
    },

    // 确认选择
    handleConfirm() {
      if (this.selectedMaterials.length === 0) {
        this.$message.warning('请选择要添加的材料')
        return
      }
      this.$emit('confirm', this.selectedMaterials)
      this.handleClose()
    },

    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.selectedMaterials = []
      this.searchForm = {
        materialName: '',
        materialBrand: ''
      }
      this.pagination.current = 1
    }
  }
}
</script>

<style scoped>
.add-material-dialog {
  padding: 0;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}

.search-form .el-form-item:last-child {
  margin-right: 0;
}

.search-form .el-input {
  width: 200px;
}

.search-form .el-input__inner {
  height: 36px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
}

.search-form .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.search-form .el-button {
  height: 36px;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 14px;
}

.search-form .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.search-form .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.material-list {
  margin-bottom: 20px;
}

.el-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #fafafa;
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
}

.el-table td {
  border-bottom: 1px solid #f0f0f0;
}

.el-table tr:hover > td {
  background-color: #f5f7fa;
}

.el-table .el-checkbox {
  margin: 0;
}

.el-table .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.pagination-section {
  text-align: center;
  margin-top: 20px;
  padding: 15px 0;
}

.el-pagination {
  text-align: center;
}

.el-pagination .el-pager li {
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 2px;
  border-radius: 4px;
}

.el-pagination .el-pager li.active {
  background-color: #409eff;
  color: #fff;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.dialog-footer {
  text-align: right;
  padding: 15px 0 0;
  border-top: 1px solid #ebeef5;
  margin-top: 20px;
}

.dialog-footer .el-button {
  margin-left: 10px;
  min-width: 80px;
  height: 36px;
  border-radius: 4px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

.dialog-footer .el-button--primary:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.dialog-footer .el-button--primary:disabled {
  background-color: #c0c4cc;
  border-color: #c0c4cc;
  color: #fff;
}

.dialog-footer .el-button--default {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button--default:hover {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-section {
    padding: 15px;
  }
  
  .search-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  
  .search-form .el-input {
    width: 100%;
  }
  
  .dialog-footer {
    text-align: center;
  }
  
  .dialog-footer .el-button {
    margin: 5px;
  }
}
</style>
